<template>
  <div>
    <!--
      list-type="picture-card"  卡片类型 text/pictrue/picture-card
      action 是上传的图片的地址, 只要给了action值, 上传图像会默认以post方式上传图像
      :file-list="fileList" 文件列表 数组包对象格式的 默认会展示这些图片列表
      :on-preview是点击已上传文件触发的处理函数
      :limit 限制上传的数量
      :on-remove 移除文件触发的处理函数
      :http-request="handleUpload" 覆盖默认上传行为
      :on-change="handleChange" 文件状态发生变化处理函数  添加文件、上传成功和上传失败时都会被调用
      上传组件修改上传图像的status状态 ready success uploading fail
     -->
    <el-upload
      :class="{uploadContainer: limit <= fileList.length}"
      list-type="picture-card"
      action="#"
      :file-list="fileList"
      :on-preview="handlePreview"
      :limit="limit"
      :on-remove="handleRemove"
      :http-request="handleUpload"
      :on-change="handleChange"
      :before-upload="beforeUpload"
      accept="image/*"
    >
      <i class="el-icon-plus" />
    </el-upload>
    <!-- 预览图片对话框 -->
    <el-dialog :visible="dialogVisible" title="预览" width="30%" @close="dialogVisible = false">
      <img :src="url" width="100%">
    </el-dialog>
  </div>
</template>

<script>
// 导入模块
import COS from 'cos-js-sdk-v5'
// 创建腾讯云实例
const cos = new COS({
  SecretId: 'AKIDb4HEuJSKvFJ5aomTt2uWrvjHYYHk5DqF',
  SecretKey: 'B5i4ECvOcfU2JK4WhcFbgU1HGzSeYBYe'
})
export default {
  props: {
    limit: {
      type: Number,
      default: 1
    }
  },
  data() {
    return {
      fileList: [
      ],
      dialogVisible: false,
      url: '' // 预览图片的地址
    }
  },
  computed: {
    // 判断所有图像是否上传完成
    isDone() {
      return this.fileList.every(item => item.status === 'success')
    }
  },
  methods: {
    // 点击图片触发预览, file是当前点击的文件对象
    handlePreview(file) {
      // 1. 展示对话框
      this.dialogVisible = true
      // 2. 将点击图片的地址赋值给对话框src绑定的url
      this.url = file.url
      // console.log(file)
    },
    // 移除文件触发的处理函数 file是当前点击的删除文件对象 fileList是最新的文件列表
    handleRemove(file, fileList) {
      // console.log(file, fileList)
      // 将最新的文件列表交给data中fileList
      this.fileList = [...fileList]
    },
    // 文件状态发生变化处理函数  添加文件、上传成功和上传失败时都会被调用
    // file是当前点击的新增文件对象 fileList是最新的文件列表
    handleChange(file, fileList) {
      // console.log(file, fileList)
      // 将最新的文件列表交给data中fileList
      this.fileList = [...fileList]
    },
    // 上传前经过的处理函数
    beforeUpload(file) { // file上传的文件
      // console.log(file)
      // 1. 校验文件的类型
      // if (!['image/gif', 'image/png', 'image/jpg', 'image/jpeg'].includes(file.type)) {
      //   this.$message.warning('请上传的jpg|png|gif|jpeg等类型图片')
      //   return false
      // }
      // 2. 校验文件大小
      if (file.size / 1024 / 1024 > 1) {
        this.$message.warning('上传的图像不能超过1M')
        return false
      }
    },
    // 上传的处理函数
    handleUpload({ file }) {
      console.log(file) // 上传的文件对象
      // 只要准备好上传的地址 -- 待会要往腾讯云上传递数据
      cos.putObject({
        Bucket: 'wcg-1305579172', /* 存储桶的名字 */
        Region: 'ap-shanghai', /* 存储桶所在地域，必须字段 */
        Key: file.name + Math.random(), /* 存储桶的文件的名称 必须唯一 */
        StorageClass: 'STANDARD',
        Body: file, // 上传文件对象
        onProgress: (progressData) => { // 上传文件期间持续触发的函数
          // console.log(JSON.stringify(progressData))
          // {"loaded":0,"total":1041668,"speed":0,"percent":0}
          // loaded已上传的大小 total文件总的代销 speed上传速度 percent百分比
          // 1. 先查找到要设置status的对象
          const obj = this.fileList.find(item => item.uid === file.uid)
          // 2. 设置这个对象的status = uploading
          obj.status = 'uploading'
          // 3. 设置上传的进度条
          obj.percentage = progressData.percent * 100
          // 4. 上传完毕后 处理状态为success
          if (obj.percentage === 100) {
            obj.status = 'success'
          }
        }
      }, (err, data) => { // 上传完成的处理函数, err是上传失败的错误对象 data是上传成功的记过
        // console.log(err || data)
        if (err) return
        // 1. 先查找到要设置url的对象
        const obj = this.fileList.find(item => item.uid === file.uid)
        // 2. 设置url地址为腾讯云返回的地址
        obj.url = 'https://' + data.Location
      })
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .uploadContainer .el-upload--picture-card{
  display: none;
}
</style>
